<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Anchor Bootstrap 4.1.3 UI Kit by WowThemesNet</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>
    
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,700" rel="stylesheet">
    
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    
<!-- Main CSS -->
<link href="./assets/css/main.css" rel="stylesheet"/>
    
<!-- Animation CSS -->
<link href="./assets/css/vendor/aos.css" rel="stylesheet"/>
    
<!-- Docs CSS -->
<link href="./assets/css/vendor/bootstrap-toc.css" rel="stylesheet"/>
<link href="./assets/css/vendor/prism.css" rel="stylesheet"/>
<!-- wangEditor -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
	#editor—wrapper {
	  border: 1px solid #ccc;
	  z-index: 100; /* 按需定义 */
	}
	#toolbar-container { border-bottom: 1px solid rgb(173, 74, 133); }
	#editor-container { height: 500px; }
  </style>
    <!-- wangEditorEnd -->
</head>
<body>  
	
    
<!----------------------------------------------------------------------
End fixed sidebar
------------------------------------------------------------------------>
<nav id="toc" class="fixedsidebar d-none d-lg-block">   
    <h5 class="mt-4 mb-4 pt-1"><a class="text-dark" href="./index.html"><strong>博客后台</strong>管理 中心</a></h5>
    <a target="_blank" href="https://www.wowthemes.net/donate/" class="btn btn-primary mb-4 btn-sm btn-round"><i class="fas fa-coffee mr-1"></i> Buy me a coffee</a>
</nav>
<!----------------------------------------------------------------------
End fixed sidebar
------------------------------------------------------------------------> 
<main class="content-withfixedsidebar">
<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
	<a class="navbar-brand d-lg-none" href="./index.html"><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a>
	<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="navbar-collapse collapse" id="navbarColor02">
		<ul class="navbar-nav mr-auto d-flex align-items-center">
			<li class="nav-item">
			<a class="nav-link" href="./index.html">回到首页</a>
			</li>
			<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			样例 </a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdown">
				<a class="dropdown-item" href="./landing.html">Home Landing</a>
				<a class="dropdown-item" href="./login.html">User Login</a>
				<a class="dropdown-item" href="./blog.html">Blog Index</a>
				<a class="dropdown-item" href="./page.html">Sample Page</a>                
			</div>
			</li>
			<li class="nav-item">
			<a class="nav-link" href="./docs.html">文档</a>
			</li>
            <li class="d-lg-none nav-item">
            <a class="nav-link" target="_blank" href="https://www.wowthemes.net/donate/"><i class="fas fa-coffee mr-1"></i> Buy me a coffee</a>
            </li>
		</ul>
		<ul class="navbar-nav ml-auto d-flex align-items-center">
			<li class="nav-item">
			<span class="nav-link" href="#">
			<a class="btn btn-info btn-round shadow" @click="saveArticle()" data-toggle="modal" 
		>
			保存文章 
			</a>
			</span>
			</li>
		</ul>
	</div>
</div>
</nav>
<!-- End Navbar -->
<div class="jumbotron jumbotron-lg jumbotron-fluid jumbotron-lg-withnav mb-3 bg-primary position-relative">
	<div class="container text-white h-100 tofront">
		<!-- 插入图片 -->
		<img
			src="./assets/img/bp.jpg h-[200px] w-[2300] "
		>
	</div>
</div>
<div id="editor1">
<!-- 内容部分 -->
<div class="article-title-wrapper">
	<form>
		<div class="row">
				<input type="text" class="form-control input-round" id="title" placeholder="请输入文字标题（6-30长度）" v-model="articleTitle" maxlength="30"/>
				
			</div>
	</form>
</div>
<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
</div>
</div>
    <!-- 内容部分END -->
<!--------------------------------------
FOOTER
--------------------------------------->
<footer class="bg-light pb-5 pt-4">
<div class="container">
	<div class="row justify-content-center text-center">
		<div class="col-md-12">			
			<span class="d-block mt-3 text-muted">©
			<script>document.write(new Date().getFullYear())</script>
			 Anchor Bootstrap UI Kit,  by <a target="_blank" href="https://www.wowthemes.net">WowThemes.net</a>. <br/><a target="_blank" href="https://www.wowthemes.net/freebies-license/">License</a></span>
		</div>
	</div>
</div>
</footer>
</main>
<!--- end main -->

<!--------------------------------------
JAVASCRIPTS
--------------------------------------->    
<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
<script src="./assets/js/functions.js" type="text/javascript"></script>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>  
<!-- Docs -->
<script src="./assets/js/vendor/prism.js" type="text/javascript"></script>
<script src="./assets/js/vendor/bootstrap-toc.js" type="text/javascript"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
 <!-- wangEditor-->
<script>

// const { createEditor, createToolbar } = window.wangEditor
// const editorConfig = {
//     placeholder: '请输入...',
//     onChange(editor) {
//       const html = editor.getHtml()//获取输入内容的html格式
//       console.log('11111111', html)
//     }

// }
// const editor = createEditor({//编辑器初始化
//     selector: '#editor-container',
//     html: '<p><br></p>',
//     config: editorConfig,
//     mode: 'default', 
// })
// const toolbarConfig = {}
// const toolbar = createToolbar({
//     editor,
//     selector: '#toolbar-container',
//     config: toolbarConfig,
//     mode: 'default', 
// })

</script>

<script type="text/javascript">

const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
    placeholder: '请输入...',
    onChange(editor) {
      const html = editor.getHtml()//获取输入内容的html格式
    //  console.log('11111111', html)
    }
}
const editor = createEditor({//编辑器初始化
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', 
})
const toolbarConfig = {}
const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', 
})
	var articleList = new Vue({
		el: "#editor1",
		data:{
			articleContent:"",
			articleTitle: "",
		},
		created() {
			// 判断用户登录
			// app.judgeUserLoginStatus(this);
			// this.getAllCategory();
		},
		methods:{
			// 返回上一页
			goBack() {
				window.history.go(-1); 
			},
			saveArticle(){
				//向后端发送post请求，data:article对象
				var me = this;
				var articleTitle = me.articleTitle;
				if (app.isEmpty(articleTitle)) {
					alert("文章标题不能为空");
					return false;
				}
				// 获得输入的内容
				var articleContent = editor.getHtml;
				console.log(articleContent);
				if (app.isEmpty(articleContent)) {
					alert("文章内容不能为空");
					return false;
				}
				if (articleContent.length > 9999) {
					alert("文章内容不能超过10000个字");
					return false;
				}
				// var utoken = app.getCookie("utoken");
				// var uid = app.getCookie("uid");
				var articleBO = {
					title: articleTitle,
					content: articleContent,
					//publishUserId: uid
				};
				var articleBOStr = JSON.stringify(articleBO);
			}
		}

	});


</script>

<script>
    $(function() {
      new ClipboardJS('.btn');
      var navSelector = '#toc';
      var $myNav = $(navSelector);
      Toc.init({
          $nav: $('#toc'),
          $scope: $('#docsarea')
        });
      $('body').scrollspy({
        target: navSelector
      });        
    });
</script>

    
<!-- Animation -->
<script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>
 
<!-- Disable animation on less than 1200px, change value if you like -->
<script>
AOS.init({
  disable: function () {
    var maxWidth = 1200;
    return window.innerWidth < maxWidth;
  }
});
</script>
    
<!-- Tooltips -->
<script> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script>
    
<!-- Popovers -->    
<script> 
$(function () {
$('[data-toggle="popover"]').popover()
})
$('.popover-dismiss').popover({
  trigger: 'focus'
})
</script>

</body>
</html>